<template>
  <div class="chartsContainer">
    <!-- 卡片区域 -->
    <el-card>
      <!-- 面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home_Ad' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>统计图表</el-breadcrumb-item>
      </el-breadcrumb>
     <div class="topBox">
      <div class="selectLeft">
          选择球馆
      </div>
      <!-- 下拉框 -->
        <el-select  @change="selectChange(selectedId)" v-model="selectedId" filterable  placeholder="请选择球馆">
            <el-option
            v-for="item in stadiumOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
        </div>
         
                 <!-- echart绑定Dom -->
                 <div id="main" style="width:700px;height:400px;"></div>
    </el-card>
  </div>
</template>

<script>
 import * as echarts from 'echarts';
 import {mapGetters} from 'vuex';
export default {
    data() {
        return {
              option:{
                    xAxis: {
                        type: 'category',
                        data:[]
                    },
                    yAxis: {
                        type: 'value',
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                        type: 'shadow'
                        }
                    },
                    series: [
                        {
                        data:[],
                        type: 'bar',
                        showBackground: false,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        }
                        }
                    ]
               },
              orderList:[],
              selectedId:'',
              stadiumOptions:[],
              beforeDate:[],
              isShowEchartBox:false,
         
        }
    },
    computed:{
        ...mapGetters({orderListData:'orderListData'}),
        ...mapGetters({stadiumDataById:'stadiumListDataById'})
    },
    methods: {
        // 获取订单数据
        getOrderListData(){
            this.$store.dispatch('getOrderListData').then(ok=>{
                if(ok){
                    this.orderList = this.orderListData;
                }
            })
        },
        // 加载下拉框
         loadingSelect(){
            this.$store.dispatch('getStadiumDataById').then(ok=>{
            if(ok){
                    this.stadiumDataById.forEach(item=>{
                    let option = {value:'',label:''};
                    option.value = item.sid;
                    option.label = item.sname;
                    this.stadiumOptions.push(option);
                });
                this.handleEchartData();
            }   
        
        })
        },
        // 下拉框值变化的回调
        selectChange(sid){
            this.orderList = this.orderListData.filter(item=>{
                return item.sid == sid;
            })
            this.handleEchartData();
           
        },
        // 处理图表数据
        handleEchartData(){
        let moneyData =[];
                for (let i = 0; i < this.beforeDate.length; i++) {
                    let orderListByDate = this.orderList.filter(item=>{
                        return item.order_date == this.beforeDate[i];
                    })
                    if(orderListByDate.length !=0){
                        let money = 0;
                        orderListByDate.forEach(item=>{
                            money = money + item.price;
                        })
                        moneyData.push(money);
                    }else{
                    
                        moneyData.push(0);
                    }
                    
                }
                this.option.series[0].data = moneyData;
                this.echartLoading();
        },
        // 获取前几天的日期
        getBeforeDate(num){
            for (let i = 0; i < num ; i++) {
              let date = new Date(new Date().setDate(new Date().getDate()-i))
              let year = date.getFullYear();
              let month = (date.getMonth()+1)<10?'0'+(date.getMonth()+1):(date.getMonth()+1);
              let day = date.getDate()<10?'0'+date.getDate():date.getDate();
              let dateStr = `${year}/${month}/${day}` 
              this.beforeDate.push(dateStr);
            } 
        },
        // echart图表的初始化
        async echartLoading(){
            let myChart = echarts.init(document.getElementById('main'));
            myChart.setOption(this.option);
  
        }
    },
    created() {
        // 获取订单数据
        this.getOrderListData();
        // 获取前几天的日期
        this.getBeforeDate(5);
        this.option.xAxis.data = this.beforeDate;
        // 加载下拉框
        this.loadingSelect();
    },
    mounted(){
        
    },
}
</script>

<style scoped lang="less">
    .topBox{
        margin-top: 20px;
        display: flex;
        height: 40px;
        .selectLeft{
            line-height: 40px;
            font-weight: 600;
            color: rgb(26, 115, 225);
            margin-right: 10px;
            padding-right: 5px;
            border-bottom: 2px solid #ddd;
            border-right:  1px solid #ddd;
            border-radius: 5px;
        }

        
    }
    .hoverBox{
        position: absolute;
        
        width: 50px;
        height: 50px;
        background: pink;
    }
</style>